import React, { Component } from "react";
import {connect} from 'react-redux';
import {ListItem, ListInfo, LoadMore} from '../style';
class List extends Component {
    getArticleList() {
        const {articleList} = this.props;
        return(
            articleList.map(item => {
                return <ListItem key={item.get('id')}>
                    <img className='list-pic'
                         src={item.get('imgUrl')} alt=""/>
                    <ListInfo>
                        <h3 className='title'>{item.get('title')}</h3>
                        <p className='desc'>{item.get('desc')}</p>
                    </ListInfo>
                </ListItem>
            })
        )
    }
    render() {
        const {loadMore,page} = this.props;
        return (
            <div>
                {this.getArticleList()}
                <LoadMore onClick={() => loadMore(page)}>更多加载</LoadMore>
            </div>
        )
    }
}

const mapState = (state) => ({
    articleList: state.getIn(['home','articleList']),
    page: state.getIn(['home','listPage'])
});
const mapDispatch = (dispatch) => ({
    loadMore(page) {
        console.log(page)
    }
});
export default connect(mapState,mapDispatch)(List);